<template>
  <el-dialog :visible.sync="visible" custom-class="dialog_big" width="1000px" @close="resetForm" >
    <div slot="title" class="flex_row-jcsb">
      <slot name="title">
        <span class="el-dialog__title">预约申报</span>
      </slot>
      <span class="newDate">当前日期：{{ currentDate }}</span>
    </div>
    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="运单编号" prop="waybillTaskCode">
            <el-tag v-for="item in formData.waybillTaskCode" :key="item">{{ item }}</el-tag>
            <!-- {{ formData.waybillTaskCode.toString() }} -->
            <!-- <el-input v-model="formData.waybillTaskCode"  disabled placeholder="请输入运单编号"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号码" prop="vehicleNo">
            <!-- <el-tag v-for="item in formData.vehicleNo" :key="item">{{ item }}</el-tag> -->
            <el-input v-model="formData.vehicleNo"  :disabled="vehicleNoEdit" placeholder="请输入车牌号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申报包数" prop="expectPackagingQty">
            <el-input v-model="formData.expectPackagingQty" disabled placeholder="请输入申报包数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申报箱" prop="expectBoxQty">
            <el-input v-model="formData.expectBoxQty" disabled placeholder="请输入申报箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申报货物重量" prop="weight">
            <el-input v-model="formData.weight" disabled placeholder="请输入申报货物重量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申报货物体积" prop="volumn">
            <el-input v-model="formData.volumn" disabled placeholder="请输入申报货物体积"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计到仓时间" prop="expectedDatetime">
            <el-date-picker
              v-model="formData.expectedDatetime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="groupBoxList" label-width="0">
          <ex_super_table v-bind="tableDetailList" :data="formData.applyDetailList" ref="TableSku"></ex_super_table>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog_button_footer">
        <el-button type="primary" @click="submitForm">{{ $tt('label_confirm') }}</el-button>
        <el-button @click="resetForm">{{ $tt('label_cancel') }}</el-button>
      </div>
</el-dialog>
</template>

<script>

export default {
  name: 'settings',
  data() {
    return {
      visible: false,
      loading: false,
      currentDate:'',
      vehicleNoEdit:false,
      formData:{
        taskIds:[],
        expectedDatetime:'',
        waybillTaskCode:[],
        vehicleNo:'',
        expectPackagingQty:0,
        expectBoxQty:0,
        weight:0,
        volumn:0,
        applyDetailList: [],
      },
      rules:{
        expectedDatetime:[{ required: true, message: '请选择预计到仓时间', trigger: 'blur' }],
        applyDetailList:[{ required: true, message: '请选择入库单号', trigger: 'blur' }],
      },
      pickerOptions: {
        disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
        }
      },
      tableDetailList:{
        model:[
          { key: 'taskCode', label: '运单编号','width': 160, 'show-overflow-tooltip': true},
          { key: 'orderCode', label: '入库单号','width': 170, 'show-overflow-tooltip': true},
          { key: 'expectPackagingQty', label: '申报包数',component: ({ row }) => {
              return {
                type: 'input-number',
                attrs: {
                  min: 1,
                  precision:0,
                  max:row.maxQty
                },
                on: {
                  input: e => {
                    if(e===undefined){
                      row.expectPackagingQty=1
                      this.$forceUpdate()
                   }
                   this.tableDataCmp()
                  },
                },
              }
          }},
          { key: 'expectBoxQty', label: '申报箱数'},
          { key: 'weight', label: '申报重量'},
          { key: 'volumn', label: '申报体积'},
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    show(data) {
      this.currentDate = this.$dateFormat((new Date().getTime()))
      this.visible = true
      this.formData.vehicleNo = []
      data.forEach(item=>{
        this.formData.taskIds.push(item.id)
        this.formData.waybillTaskCode.push(item.waybillTaskCode)
        if(item.vehicleNo){
          this.formData.vehicleNo.push(item.vehicleNo)
        }
      })


      this.formData.vehicleNo = this.formData.vehicleNo.toString()
      this.vehicleNoEdit = this.formData.waybillTaskCode.length>1||!!this.formData.vehicleNo


      // 获取详情列表
      this.getDetailList()
    },
    getDetailList(){
      this.$ajax({
          url:`/tms-api/waybill/TmsTaskInfoQueryRpc/toInboundSchedule.json`,
          method: 'get',
          data:{
            taskIds:this.formData.taskIds.toString()
          },
          type: "formData",
          loading: true,
          success: ({data}) => {
            if(data){
              const { applyDetailList } = data
              this.formData.applyDetailList = applyDetailList.map(it=>{
                it.maxQty = it.expectPackagingQty
                return it
              })
              this.tableDataCmp()
            }

          },
          failure: (res) => {
            this.visible = false
          },
        })
    },
    tableDataCmp(){
      this.formData.expectPackagingQty=0
      this.formData.expectBoxQty=0
      this.formData.weight=0
      this.formData.volumn=0

      this.formData.applyDetailList.forEach((item)=>{
        this.formData.expectPackagingQty += item.expectPackagingQty
        this.formData.expectBoxQty += item.expectBoxQty
        this.formData.volumn += item.volumn
        this.formData.weight += item.weight
      })

      this.formData.weight = this.formData.weight.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
      this.formData.volumn = this.formData.volumn.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
    },
    hide() {
      this.visible = false
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$ajax({
            url:'/tms-api/waybill/TmsTaskInfoQueryRpc/saveInboundSchedule.json',
            method: 'post',
            data:{
              ...this.formData
            },
            type: "json",
            loading: true,
            success: (res) => {
              this.$emitPage('warehouse_appointment>confirm', 'reload')
              this.resetForm()
              this.$message.success(this.$t('申报创建成功，我仓收到预约申报信息后会尽快处理，请关注预约申报的更新。'))
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields();
      this.$data.formData = this.$options.data().formData
      this.visible=false;
    },
  }
}
</script>

<style lang="less" scoped>
.newDate{
  float: right;
  margin-right: 40px;
}
.el-select{
  display: block;
}

.el-tag{
  margin-right: 10px;
}
</style>
